import { Form, Input, Button, Image, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { merchantDetail, merchantSave } from '@api'
import { useEffect, useState, useRef } from 'react'
import { uploadFileToOSS } from '@utils/upload'
import './index.scss'
const EditMerchant = () => {
    const navigate = useNavigate()

    const fileInputRef = useRef(null)

    const [details, setDetails] = useState({})

    const handleButtonClick = () => {
        fileInputRef.current.click()
    }
    const handleFileChange = (event) => {
        // 处理文件选择
        const file = event.target.files[0]
        uploadFileToOSS({ file }).then(({ res }) => {
            const url = res.requestUrls[0].split('?')[0]
            setDetails({
                ...details,
                image: url
            })
        })
    }
    const onFinish = (val) => {
        merchantSave({
            ...details,
            ...val,
            unitAddress: `${val.province}${val.city}${val.area}${val.village}${val.street}${val.address}`
        }).then(({ success, info }) => {
            Toast.show(info)
            if (success) {
                navigate(-1)
            }
        })
    }
    return (
        <div className="EditMerchant">
            <Form
                layout="horizontal"
                mode="card"
                initialValues={details}
                onFinish={onFinish}
                footer={
                    <Button block type="submit" color="primary" size="large">
                        提交
                    </Button>
                }
            >
                <Form.Header>LOGO信息：</Form.Header>
                <Form.Item>
                    <Image fit="cover" src={details.image} />
                    <Button color="primary" size="mini" style={{ marginTop: '20px' }} onClick={handleButtonClick}>
                        修改图片
                    </Button>
                </Form.Item>
                <Form.Header>基本信息：</Form.Header>
                <Form.Item name="unit" label="单位名称">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item name="headName" label="负责人">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Header />
                <Form.Item name="headPhone" label="电话">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item name="trade" label="行业类型" help="多个类型之间使用'/'隔开">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Header>地址信息：</Form.Header>
                <Form.Item name="province" label="一级">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item name="city" label="二级">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item name="area" label="三级">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item name="street" label="四级">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item name="village" label="五级">
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item name="address" label="六级">
                    <Input placeholder="请输入" />
                </Form.Item>
            </Form>
            <input type="file" style={{ display: 'none' }} ref={fileInputRef} onChange={handleFileChange} />
        </div>
    )
}
export default EditMerchant
